<template>
  <div class="doctor">
    <el-affix>
      <div class="fly_btn_contain">
        <el-button @click="go2Index" class="hvr-bob hvr-sweep-to-right" icon="fa fa-home fa-lg">返回首页</el-button>
        <el-button @click="go2Team" class=" hvr-bob hvr-sweep-to-right" icon="fa fa-group fa-lg">返回团队介绍页</el-button>
      </div>
    </el-affix>
    <div class="top-side">
        <div class="avatar">
          <el-avatar icon="el-icon-user-solid" class="hvr-wobble-horizontal" :size=200 :src="doctor.avatar"></el-avatar>
        </div>
        <div class="desc">
          <p style="font-size: 40px;cursor: default;" class="hvr-bob">{{doctor.name}}</p>
          <!--        <p style="font-size: 20px;">XX部门XX科医生</p>-->
        </div>
      </div>
    <div class="main">
      <el-card class="hvr-grow">
        <template #header>
          <div class="card-header">
            <span>个人简介</span>
          </div>
        </template>
        <div  class="content">
          <el-descriptions border :column="1" >
            <el-descriptions-item label="姓名" align="center">{{doctor.name}}</el-descriptions-item>
            <el-descriptions-item label="性别" align="center">{{doctor.sex}}</el-descriptions-item>
            <el-descriptions-item label="年龄" align="center">{{doctor.age}}</el-descriptions-item>
            <el-descriptions-item label="所属科系" align="center">{{doctor.subject}}</el-descriptions-item>
            <el-descriptions-item label="担任职务" align="center">
              <el-tag effect="plain">{{doctor.profectionTitle}}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <el-card class="hvr-grow">
        <template #header>
          <div class="card-header">
            <span>专业特长</span>
          </div>
        </template>
        <div  class="content">
          <span style="letter-spacing: 0.15em;line-height: 40px">　有较强的上进心，具有吃苦耐劳的精神，能较快适应环境，为人诚实，做事细心谨慎，责任心强，具有良好的团队合作精神和沟通能力。个性乐观执着，积极进取，敢于面对困难与挑战。曾担任系医学会荣誉会员</span>
        </div>
      </el-card>
      <el-card class="hvr-grow">
        <template #header>
          <div class="card-header">
            <span>个人荣誉</span>
          </div>
        </template>
        <div  class="content">
          <el-timeline>
           <el-scrollbar height="200px">
             <el-timeline-item
                 v-for="(item, index) in horner"
                 :key="index"
                 color="#85C1E9"
                 :timestamp="item.timestamp"
             >
               {{item.content}}
             </el-timeline-item>
           </el-scrollbar>
          </el-timeline>
          <el-divider style="background: #000"></el-divider>
          <span>
            综合评分:
          </span>
          <el-rate
              v-model="value"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
          >
          </el-rate>
        </div>
      </el-card>
      <el-card class="hvr-grow">
        <template #header>
          <div class="card-header">
            <span>联系方式 & 出诊时间</span>
          </div>
        </template>
        <div  class="content">
          <el-descriptions border :column="1" >
            <el-descriptions-item label="联系电话" align="center">{{doctor.tel}}</el-descriptions-item>
            <el-descriptions-item label="联系邮箱" align="center">{{doctor.email}}</el-descriptions-item>
            <el-descriptions-item label="常驻门诊号" align="center">{{doctor.roomNo}}</el-descriptions-item>
            <el-descriptions-item label="出诊时间" align="center">
              <el-tag>
                每周一、三、五
                <el-tag type="warning">8:00</el-tag> 至 <el-tag type="warning">20:00</el-tag>
              </el-tag>
              <br><br>
              <el-tag>
                每周二、四、六
                <el-tag type="warning">10:00</el-tag> 至 <el-tag type="warning">22:00</el-tag>
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>
      <div class="bottom-side">
        <el-button type="text" @click="go2Index" class="btn hvr-bob">返回首页</el-button>
      </div>
  </div>
</template>

<script>
import {getDoctorInfo} from "../../api/api";
import {ElMessage} from "element-plus";

export default {
  name: "Index",
  mounted() {
    getDoctorInfo({
      docId: this.$route.query.drId
    },{})
    .then(res=>{
      //console.log(res)
      if(res.ret === 0){
        this.doctor = res.data
        if (this.doctor.avatar===null){
          this.doctor.avatar = ''
        }
        ElMessage.success({
          type: 'success',
          message: res.msg
        })
      }
      else{
        this.doctor = null
        ElMessage.warning({
          type: 'warning',
          message: res.msg
        })
      }
    })
    .catch(err=>{
      console.log(err)
      ElMessage.danger({
        type: 'danger',
        message: err
      })
    })
  },
  data(){
    return{
      value:4.5,
      horner:[
        {
          content:'院优秀新人',
          timestamp:'2014-05-12',
        },
        {
          content:'白衣天使',
          timestamp:'2015-06-21',
        },
        {
          content:'白衣天使',
          timestamp:'2016-07-5',
        },
        {
          content:'院荣誉医生',
          timestamp:'2021-04-23',
        },
        {
          content:'市优秀医护人员',
          timestamp:'2016-07-5',
        },
        {
          content:'全国感动中国优秀人物',
          timestamp:'2021-04-23',
        },
        {
          content:'市优秀医护人员',
          timestamp:'2016-07-5',
        },
        {
          content:'省优秀医护人员',
          timestamp:'2021-04-23',
        },

      ],
      doctor:{},
    }
  },
  methods:{
    go2Index(){
      this.$router.push('/index/home')
    },
    go2Team(){
      this.$router.go(-1)
    }
  },
  beforeRouteEnter(to, from, next) {
    // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
    document.querySelector('body').setAttribute('style', 'margin:0;padding:0;')
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 去除背景色
    document.querySelector('body').setAttribute('style', '')
    next()
  },
}
</script>

<style scoped>

.btn{
  letter-spacing: 0.25em;
  font-size: 30px;
  margin-top: 50px;
  color: #FF6633;
  transition: 0.25s ease-in-out;
}
.btn:hover{
  color: #f4f4f5;
}


.el-rate{
  display: inline;
}
::v-deep(.el-rate__icon){
  font-size: 30px;
  margin-right: 0;
  padding-bottom: 5px;
}
.content{
  margin-top: 10px;
  text-align: left;
  cursor: default;
}

.main{

  display: flex;
  flex-wrap: wrap;

}

.main .el-card{

  position: relative;
  width: 620px;
  height: 400px;
  margin:20px auto 20px;
  border-radius: 10px;
  background: rgb(255,255,255);
  box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.top-side{
  width: auto;
  height: fit-content;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  margin-top: 60px;
}

.el-avatar{

}

.doctor::before{
  background: url('../../assets/doctorInfo.jpg') no-repeat 0/cover fixed;
}

.doctor{
  position: absolute;
  background: url('../../assets/doctorInfo.jpg') no-repeat 0/cover fixed;
  width: 100%;
  height: 200%;
}

.fly_btn_contain{
  position: absolute;
  display: flex;
  flex-flow: column;
}

.fly_btn_contain .el-button{
  width: 200px;
  height: 60px;
  font-size: 18px;
  letter-spacing: 0.15em;
  margin-left: 0;
  margin-top: 20px;
}

.fly_btn_contain .el-button:hover{
  background: #f4f4f5;
  color: #000;
  border: 1px solid #000;
}

</style>